<!doctype html>
<html>
	<head>
		<meta content="text/html;charset=UTF-8" http_equiv="Content-Type">
		<title>水果购物网</title>
		<link rel=stylesheet type="text/css" href="cart_color.css">
		<script type="text/javascript">	
			if(localStorage.userid != "guest" || sessionStorage.userpwd != "1234"){
				alert("账号密码错误，请回首页登录!!");
				sessionStorage.removeItem('userpwd');
				document.location="ch05_04.html"
			}
			function isload(){
				document.getElementById("showuserid").innerHTML=localStorage.userid;
				var div_list="";
				var sale_item = new Array("水果蛋糕","葡萄","奇异果","柠檬","苹果派","菠萝","水果组合","苹果","水果茶");
				for(i in sale_item){
					div_list=div_list+"<div class='fruit'>";
					div_list=div_list+"<img class='img_fruit' src='images/imager"+i+".png'></img><br />";
					div_list=div_list+"<font style='color:#ff0000'>" + sale_item[i] + "</font><br />";
					div_list=div_list+"<input type='checkbox' name='chkitem' value='" + sale_item[i] + "' />";
					div_list=div_list+"我要选购</div>";
				}
				document.getElementById("div_sale").insertAdjacentHTML("beforeend", div_list);
				
				if(localStorage.Cartlist){
					document.getElementById("shopping_list").value="你的购买列表："+localStorage.Cartlist;
				}else{
					document.getElementById("shopping_list").value="你的购买列表：";
				}
				
				document.getElementById("clearButton").addEventListener("click", clearCart);
				document.getElementById("cartButton").addEventListener("click", addtoCart);
			}
			
			function clearCart(){
				document.getElementById("shopping_list").value="你的购买列表：";
				localStorage.removeItem("Cartlist");
			}
			function addtoCart(){
				var checkselect="";
				var checkBoxList=document.getElementsByName("chkitem");
				for(i in checkBoxList){
					if(checkBoxList[i].checked)
					{
						checkselect=checkselect+"\n"+checkBoxList[i].value;
					}
				}
				
				if(!localStorage.Cartlist)
					localStorage.Cartlist=checkselect;
				else
					localStorage.Cartlist=localStorage.Cartlist+checkselect;
					
				document.getElementById("shopping_list").value="你的购买列表："+localStorage.Cartlist;
			}
			function logout(){
				localStorage.removeItem("userid");
				sessionStorage.clear();
				document.location='ch05_04.html';
			}
		</script>
	</head>
	<body onload="isload()">
		<div id="main">
			<header>欢迎光临水果购物网 <input type="button" value="注销" onclick="logout();" /> </header>
			<span id="showuserid">aaa</span> 你好<br />请选择要购买的商品!<br />
			<button id="clearButton">清除购物车</button><br />
			<button id="cartButton">放入购物车</button>
			<textarea id="shopping_list" rows="5" cols="50"></textarea>
			<div id="div_sale"></div>
			<footer>
				营业时间：周一~周五 8:30~20:30<br />
				电话：123-45678
			</footer>
		</div>		
	</body>
</html>